<template>
    <div class="announce-container">
      <h2 class="title">捐款数据公示</h2>
      <div  class="table-container">
        <table class="donate-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>金额</th>
              <th>类型</th>
              <th>时间</th>
              <th>用途</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in currentPageData" :key="item.id">
              <td>{{ pageSize * (currentPage - 1) + index + 1 }}</td>
              <td>¥ {{  item.amount.toFixed(2) }}</td>
              <td>{{ item.type === '收入' ? '收入' : '支出' }}</td>
              <td>{{ formatDate(item.time) }}</td>
              <td>{{ item.purpose || '未说明用途' }}</td>
            </tr>
          </tbody>
        </table>
        
        <!-- 分页器 -->
        <div class="pagination-container" >
          <button 
            @click="currentPage = 1" 
            :disabled="currentPage === 1"
            class="pagination-btn"
          >
            首页
          </button>
          <button 
            @click="currentPage--" 
            :disabled="currentPage === 1"
            class="pagination-btn"
          >
            上一页
          </button>
          
          <span class="pagination-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页
          </span>
          
          <button 
            @click="currentPage++" 
            :disabled="currentPage === totalPages"
            class="pagination-btn"
          >
            下一页
          </button>
          <button 
            @click="currentPage = totalPages" 
            :disabled="currentPage === totalPages"
            class="pagination-btn"
          >
            尾页
          </button>
        </div>
      </div>
    </div>
  </template>

<script setup lang="ts">
import {getDonateListAPI} from "@/api/pet"
import {onMounted, ref, computed} from "vue"

// "2025-04-17T08:36:02.000+00:00" => 2025/04/17 16:48:17
// 时间格式化函数
const formatDate = (dateStr: string): string => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};

// 分页相关
const currentPage = ref(1);
const pageSize = ref(12);

// 存储捐款数据
const DonateList = ref([]);
const totalPages = computed(() => Math.ceil(DonateList.value.length / pageSize.value));

// 当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return DonateList.value.slice(start, end);
});

const getDonateList = async() => {
    const res = await getDonateListAPI();
    DonateList.value = res.data.items;
    console.log(DonateList.value);
}

onMounted(() => {
    getDonateList();
});
</script>

<style scoped lang="scss">
.announce-container {
  width: 1200px;
  max-width: 100%; 
  height: 750px;
  max-height: 750;//页面最大高度:不能超过
  margin-top: 50px;//与顶部的间距
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}

.table-container {
  display: flex;
  flex-direction: column;
}

.donate-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e7e7e7;
    
    &:first-child {
      width: 80px;
      text-align: center;
    }
    
    &:nth-child(2) {
      width: 120px;
      text-align: right;
      color: #27ba9b; /* 金额绿色 */
    }
  }

  th {
    background: #f8f9fa;
    font-weight: 500;
    color: #34495e;
    position: sticky;
    top: 0; /* 表头固定 */
  }
}

.empty-tip {
  padding: 40px;
  text-align: center;
  color: #7f8c8d;
}

/* 分页器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 20px;//和底部的距离
  left: 0;//左右居中
  right: 0;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  background-color: white;
  color: #34495e;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover:not(:disabled) {
    background-color: #f8f9fa;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.pagination-info {
  color: #7f8c8d;
  padding: 0 10px;
}
</style>